import { useState, useEffect } from 'react'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "/components/ui/card"
import { Button } from "/components/ui/button"
import { Input } from "/components/ui/input"
import { Label } from "/components/ui/label"
import { Search, BookOpen, Users, Lightbulb, Sparkles, Clock, MapPin, Heart, Moon, Sun } from 'lucide-react'

interface StudyContent {
  verse: string
  verseText: string
  nkjvReference: string
  explanation: {
    overview: string
    keyThemes: string[]
    theologicalSignificance: string
    crossReferences: string[]
  }
  historicalContext: {
    period: string
    author: string
    audience: string
    culturalBackground: string
    historicalEvents: string[]
  }
  application: {
    dailyLife: string[]
    relationships: string[]
    spiritualGrowth: string[]
    communityImpact: string[]
    prayerPoints: string[]
  }
}

// NKJV Bible verses database (sample)
const nkjvVerses: Record<string, { text: string; reference: string }> = {
  "romans 8:28": {
    text: "And we know that all things work together for good to those who love God, to those who are the called according to His purpose.",
    reference: "Romans 8:28 (NKJV)"
  },
  "john 3:16": {
    text: "For God so loved the world that He gave His only begotten Son, that whoever believes in Him should not perish but have everlasting life.",
    reference: "John 3:16 (NKJV)"
  },
  "psalm 23:1": {
    text: "The Lord is my shepherd; I shall not want.",
    reference: "Psalm 23:1 (NKJV)"
  },
  "jeremiah 29:11": {
    text: "For I know the thoughts that I think toward you, says the Lord, thoughts of peace and not of evil, to give you a future and a hope.",
    reference: "Jeremiah 29:11 (NKJV)"
  },
  "philippians 4:13": {
    text: "I can do all things through Christ who strengthens me.",
    reference: "Philippians 4:13 (NKJV)"
  }
}

export default function BibleStudyApp() {
  const [verseInput, setVerseInput] = useState('')
  const [studyContent, setStudyContent] = useState<StudyContent | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState('')
  const [darkMode, setDarkMode] = useState(false)

  useEffect(() => {
    if (darkMode) {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }
  }, [darkMode])

  const getNKJVText = (input: string): { text: string; reference: string } => {
    const normalized = input.toLowerCase().trim()
    
    if (nkjvVerses[normalized]) {
      return nkjvVerses[normalized]
    }
    
    for (const [key, value] of Object.entries(nkjvVerses)) {
      if (normalized.includes(key) || key.includes(normalized)) {
        return value
      }
    }
    
    return {
      text: "And we know that all things work together for good to those who love God, to those who are the called according to His purpose.",
      reference: "Romans 8:28 (NKJV)"
    }
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!verseInput.trim()) {
      setError('Please enter a Bible verse')
      return
    }

    setIsLoading(true)
    setError('')
    
    const nkjvData = getNKJVText(verseInput)
    
    setTimeout(() => {
      setStudyContent({
        verse: verseInput,
        verseText: nkjvData.text,
        nkjvReference: nkjvData.reference,
        explanation: {
          overview: "This powerful verse from Romans 8 reveals God's sovereign purpose in the lives of believers. The phrase 'we know' indicates this is established truth, not speculation. The scope 'all things' is comprehensive - nothing is excluded from God's redemptive work.",
          keyThemes: [
            "God's Sovereignty - He actively works in every circumstance",
            "Divine Purpose - Nothing happens without reason in God's plan",
            "Unconditional Love - The promise is for 'those who love Him'",
            "Calling and Election - Believers are 'called according to His purpose'"
          ],
          theologicalSignificance: "This verse bridges the gap between God's providence and human suffering. It doesn't promise that all things are good, but that God works through all things for ultimate good. This reflects the biblical pattern of redemptive suffering seen in Joseph, Job, and ultimately Christ.",
          crossReferences: ["Genesis 50:20 (NKJV)", "Jeremiah 29:11 (NKJV)", "Ephesians 1:11 (NKJV)", "Philippians 1:6 (NKJV)"]
        },
        historicalContext: {
          period: "AD 57, during Paul's third missionary journey",
          author: "Apostle Paul",
          audience: "Christian community in Rome - a diverse church of Jews and Gentiles",
          culturalBackground: "Rome was the center of the Roman Empire, where Christians faced increasing persecution under Nero. The church was struggling with questions about God's faithfulness amid suffering and social pressure to conform to Roman paganism.",
          historicalEvents: [
            "Recent expulsion of Jews from Rome by Claudius (AD 49)",
            "Growing persecution under Emperor Nero",
            "Tension between Jewish and Gentile believers",
            "Economic hardships and social ostracization"
          ]
        },
        application: {
          dailyLife: [
            "When facing setbacks at work, remember God is developing character and opening new opportunities",
            "In financial difficulties, trust that God is teaching dependence and eternal values",
            "During health challenges, see God's refining work and eternal perspective",
            "When plans fail, seek God's greater purpose rather than your own agenda"
          ],
          relationships: [
            "Forgive others knowing God can bring good even from hurtful situations",
            "View difficult relationships as opportunities for Christlike character development",
            "Trust God to work in estranged family relationships for eventual reconciliation",
            "Use conflicts as chances to demonstrate supernatural peace and love"
          ],
          spiritualGrowth: [
            "Keep a gratitude journal documenting how God worked through past difficulties",
            "Memorize this verse for times of trial and uncertainty",
            "Practice surrendering daily frustrations to God's sovereign plan",
            "Develop eyes to see God's hand in both blessings and trials"
          ],
          communityImpact: [
            "Share testimonies of God's redemptive work in past struggles",
            "Support others going through trials with hope-filled perspective",
            "Create support groups that focus on God's purposes in suffering",
            "Serve in ministries that bring good from difficult circumstances"
          ],
          prayerPoints: [
            "Thank God for specific ways He has worked good through past difficulties",
            "Ask for eyes to see His purposes in current challenges",
            "Pray for others who are struggling to grasp this truth",
            "Request grace to trust God's timing and methods"
          ]
        }
      })
      setIsLoading(false)
    }, 1500)
  }

  return (
    <div className={`min-h-screen transition-colors duration-300 ${
      darkMode 
        ? 'bg-gradient-to-br from-gray-900 via-slate-800 to-gray-800' 
        : 'bg-gradient-to-br from-slate-50 via-blue-50 to-purple-50'
    } py-8 px-4`}>
      <div className="max-w-4xl mx-auto">
        {/* Header with Dark Mode Toggle */}
        <div className="flex justify-between items-center mb-8">
          <div className="flex-1 text-center">
            <div className="flex items-center justify-center gap-2 mb-2">
              <Sparkles className={`w-6 h-6 ${darkMode ? 'text-teal-400' : 'text-amber-500'}`} />
              <h1 className={`text-3xl md:text-4xl font-bold ${
                darkMode 
                  ? 'bg-gradient-to-r from-teal-300 via-cyan-300 to-blue-300 bg-clip-text text-transparent' 
                  : 'bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 bg-clip-text text-transparent'
              }`}>
                Bible Study Companion
              </h1>
              <Sparkles className={`w-6 h-6 ${darkMode ? 'text-teal-400' : 'text-amber-500'}`} />
            </div>
            <p className={`text-base md:text-lg ${darkMode ? 'text-white' : 'text-gray-600'}`}>
              Deepen your understanding with comprehensive insights
            </p>
          </div>
          
          <button
            onClick={() => setDarkMode(!darkMode)}
            className={`p-2 rounded-lg transition-colors ${
              darkMode 
                ? 'bg-gray-800 text-teal-400 hover:bg-gray-700' 
                : 'bg-white text-gray-600 hover:bg-gray-100'
            } shadow-lg`}
            aria-label="Toggle dark mode"
          >
            {darkMode ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
          </button>
        </div>

        {/* Verse Input Form */}
        <Card className={`mb-6 border-2 shadow-xl ${
          darkMode 
            ? 'border-gray-700 bg-gray-800 shadow-gray-900/50' 
            : 'border-indigo-100 bg-white shadow-indigo-100/50'
        }`}>
          <CardHeader className={`rounded-t-lg ${
            darkMode 
              ? 'bg-gradient-to-r from-gray-800 via-slate-700 to-gray-700' 
              : 'bg-gradient-to-r from-indigo-50 via-purple-50 to-pink-50'
          }`}>
            <CardTitle className={`flex items-center gap-2 ${darkMode ? 'text-white' : 'text-indigo-700'}`}>
              <Search className="w-5 h-5" />
              Enter a Bible Verse
            </CardTitle>
            <CardDescription className={darkMode ? 'text-white' : 'text-indigo-600'}>
              Type a verse reference (e.g., John 3:16, Psalm 23:1, Romans 8:28)
            </CardDescription>
          </CardHeader>
          <CardContent className="pt-6">
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <Label htmlFor="verse" className={darkMode ? 'text-white' : 'text-gray-700'}>
                  Verse Reference
                </Label>
                <Input
                  id="verse"
                  type="text"
                  placeholder="e.g., Romans 8:28, John 3:16, Philippians 4:13"
                  value={verseInput}
                  onChange={(e) => setVerseInput(e.target.value)}
                  className={`mt-1 ${darkMode 
                    ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 focus:border-teal-400 focus:ring-teal-400' 
                    : 'border-indigo-200 focus:border-indigo-400 focus:ring-indigo-400'
                  }`}
                />
              </div>
              <div className={`text-sm ${darkMode ? 'text-white' : 'text-gray-600'}`}>
                <p>Available verses: Romans 8:28, John 3:16, Psalm 23:1, Jeremiah 29:11, Philippians 4:13</p>
              </div>
              {error && (
                <p className="text-sm text-red-600">{error}</p>
              )}
              <Button 
                type="submit" 
                disabled={isLoading} 
                className={`w-full ${darkMode 
                  ? 'bg-gradient-to-r from-teal-600 via-cyan-600 to-blue-600 hover:from-teal-500 hover:via-cyan-500 hover:to-blue-500' 
                  : 'bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 hover:from-indigo-700 hover:via-purple-700 hover:to-pink-700'
                }`}
              >
                {isLoading ? 'Studying...' : 'Study This Verse'}
              </Button>
            </form>
          </CardContent>
        </Card>

        {/* Study Results */}
        {studyContent && (
          <div className="space-y-6">
            {/* Display Verse - TEAL/CYAN THEME */}
            <Card className={`border-2 shadow-xl ${
              darkMode 
                ? 'border-teal-600 bg-gray-800 shadow-teal-900/50' 
                : 'border-teal-200 bg-white shadow-teal-100/50'
            }`}>
              <CardHeader className={`rounded-t-lg ${
                darkMode 
                  ? 'bg-gradient-to-r from-teal-800 via-cyan-800 to-blue-800' 
                  : 'bg-gradient-to-r from-teal-50 via-cyan-50 to-blue-50'
              }`}>
                <CardTitle className={`text-xl md:text-2xl ${darkMode ? 'text-white' : 'text-teal-800'} text-center italic`}>
                  "{studyContent.verseText}"
                </CardTitle>
                <p className={`text-center ${darkMode ? 'text-white' : 'text-teal-700'} font-medium text-base md:text-lg`}>
                  {studyContent.nkjvReference}
                </p>
              </CardHeader>
            </Card>

            {/* Explanation */}
            <Card className={`border-2 shadow-xl ${
              darkMode 
                ? 'border-blue-700 bg-gray-800 shadow-blue-900/50' 
                : 'border-blue-200 bg-white shadow-blue-100/50'
            }`}>
              <CardHeader className={`rounded-t-lg ${
                darkMode 
                  ? 'bg-gradient-to-r from-blue-800 via-cyan-800 to-sky-800' 
                  : 'bg-gradient-to-r from-blue-50 via-cyan-50 to-sky-50'
              }`}>
                <CardTitle className={`flex items-center gap-2 ${darkMode ? 'text-white' : 'text-blue-700'}`}>
                  <BookOpen className="w-5 h-5" />
                  Deep Explanation & Theological Insights
                </CardTitle>
              </CardHeader>
              <CardContent className={`pt-6 ${darkMode ? 'bg-blue-900/20' : 'bg-blue-50/30'}`}>
                <div className="space-y-4">
                  <div>
                    <h3 className={`font-semibold mb-2 ${darkMode ? 'text-white' : 'text-blue-800'}`}>
                      NKJV Translation Notes
                    </h3>
                    <p className={`${darkMode ? 'text-white' : 'text-gray-700'} leading-relaxed`}>
                      The NKJV renders this verse with "work together for good" which emphasizes the 
                      synergistic nature of God's providence - all circumstances cooperate under divine 
                      sovereignty for the believer's ultimate benefit.
                    </p>
                  </div>
                  
                  <div>
                    <h3 className={`font-semibold mb-2 ${darkMode ? 'text-white' : 'text-blue-800'}`}>Overview</h3>
                    <p className={`${darkMode ? 'text-white' : 'text-gray-700'} leading-relaxed`}>
                      {studyContent.explanation.overview}
                    </p>
                  </div>
                  
                  <div>
                    <h3 className={`font-semibold mb-2 ${darkMode ? 'text-white' : 'text-blue-800'}`}>Key Themes</h3>
                    <ul className={`list-disc list-inside space-y-1 ${darkMode ? 'text-white' : 'text-gray-700'}`}>
                      {studyContent.explanation.keyThemes.map((theme, index) => (
                        <li key={index} className="ml-4">{theme}</li>
                      ))}
                    </ul>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Historical Context - CHANGED TITLE TO WHITE */}
            <Card className={`border-2 shadow-xl ${
              darkMode 
                ? 'border-emerald-700 bg-gray-800 shadow-emerald-900/50' 
                : 'border-emerald-200 bg-white shadow-emerald-100/50'
            }`}>
              <CardHeader className={`rounded-t-lg ${
                darkMode 
                  ? 'bg-gradient-to-r from-emerald-800 via-teal-800 to-green-800' 
                  : 'bg-gradient-to-r from-emerald-50 via-teal-50 to-green-50'
              }`}>
                <CardTitle className={`flex items-center gap-2 ${darkMode ? 'text-white' : 'text-emerald-700'}`}>
                  <Users className="w-5 h-5" />
                  <div>
                    <div className={darkMode ? 'text-white' : 'text-emerald-700'}>Historical & Cultural Context</div>
                    <div className={`flex items-center gap-4 mt-1 text-sm ${darkMode ? 'text-white' : 'text-emerald-600'}`}>
                      <span className="flex items-center gap-1">
                        <Clock className="w-4 h-4" /> {studyContent.historicalContext.period}
                      </span>
                      <span className="flex items-center gap-1">
                        <MapPin className="w-4 h-4" /> {studyContent.historicalContext.author}
                      </span>
                    </div>
                  </div>
                </CardTitle>
              </CardHeader>
              <CardContent className={`pt-6 ${darkMode ? 'bg-emerald-900/20' : 'bg-emerald-50/30'}`}>
                <div className="space-y-4">
                  <div>
                    <h3 className={`font-semibold mb-2 ${darkMode ? 'text-white' : 'text-emerald-800'}`}>
                      Original Audience
                    </h3>
                    <p className={`${darkMode ? 'text-white' : 'text-gray-700'}`}>
                      {studyContent.historicalContext.audience}
                    </p>
                  </div>
                  
                  <div>
                    <h3 className={`font-semibold mb-2 ${darkMode ? 'text-white' : 'text-emerald-800'}`}>
                      Cultural Background
                    </h3>
                    <p className={`${darkMode ? 'text-white' : 'text-gray-700'} leading-relaxed`}>
                      {studyContent.historicalContext.culturalBackground}
                    </p>
                  </div>

                  <div>
                    <h3 className={`font-semibold mb-2 ${darkMode ? 'text-white' : 'text-emerald-800'}`}>
                      Historical Events
                    </h3>
                    <ul className={`list-disc list-inside space-y-1 ${darkMode ? 'text-white' : 'text-gray-700'}`}>
                      {studyContent.historicalContext.historicalEvents.map((event, index) => (
                        <li key={index} className="ml-4">{event}</li>
                      ))}
                    </ul>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Application */}
            <Card className={`border-2 shadow-xl ${
              darkMode 
                ? 'border-purple-700 bg-gray-800 shadow-purple-900/50' 
                : 'border-purple-200 bg-white shadow-purple-100/50'
            }`}>
              <CardHeader className={`rounded-t-lg ${
                darkMode 
                  ? 'bg-gradient-to-r from-purple-800 via-pink-800 to-indigo-800' 
                  : 'bg-gradient-to-r from-purple-50 via-pink-50 to-indigo-50'
              }`}>
                <CardTitle className={`flex items-center gap-2 ${darkMode ? 'text-white' : 'text-purple-700'}`}>
                  <Lightbulb className="w-5 h-5" />
                  <Heart className="w-5 h-5" />
                  Life Application Guide
                </CardTitle>
              </CardHeader>
              <CardContent className={`pt-6 ${darkMode ? 'bg-purple-900/20' : 'bg-purple-50/30'}`}>
                <div className="space-y-6">
                  {Object.entries(studyContent.application).map(([category, items]) => (
                    <div key={category}>
                      <h3 className={`font-semibold mb-3 flex items-center gap-2 ${
                        darkMode ? 'text-white' : 'text-purple-800'
                      }`}>
                        <span className={`w-2 h-2 rounded-full ${darkMode ? 'bg-purple-400' : 'bg-purple-500'}`}></span>
                        {category.charAt(0).toUpperCase() + category.slice(1).replace(/([A-Z])/g, ' $1')}
                      </h3>
                      <ul className={`list-disc list-inside space-y-2 ${darkMode ? 'text-white' : 'text-gray-700'}`}>
                        {items.map((item: string, index: number) => (
                          <li key={index} className="ml-4">{item}</li>
                        ))}
                      </ul>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>
        )}

        {/* Loading State */}
        {isLoading && (
          <Card className={`border-2 ${darkMode ? 'border-gray-700 bg-gray-800' : 'border-gray-200 bg-white'}`}>
            <CardContent className="py-8">
              <div className="text-center">
                <div className={`animate-spin rounded-full h-8 w-8 border-b-2 mx-auto mb-4 ${
                  darkMode ? 'border-teal-400' : 'border-indigo-600'
                }`}></div>
                <p className={darkMode ? 'text-white' : 'text-gray-600'}>
                  Loading study materials...
                </p>
              </div>
            </CardContent>
          </Card>
        )}

        {/* Welcome Message */}
        {!studyContent && !isLoading && (
          <Card className={`border-2 ${darkMode ? 'border-gray-700 bg-gray-800' : 'border-gray-200 bg-white'}`}>
            <CardContent className="py-8 text-center">
              <div className={`flex justify-center gap-3 mb-4 ${darkMode ? 'text-teal-400' : 'text-gray-400'}`}>
                <BookOpen className="w-10 h-10" />
                <Sparkles className="w-10 h-10" />
                <Heart className="w-10 h-10" />
              </div>
              <p className={`text-lg ${darkMode ? 'text-white' : 'text-gray-600'}`}>
                Enter a Bible verse above to begin your study journey
              </p>
              <p className={`text-sm mt-2 ${darkMode ? 'text-white' : 'text-gray-500'}`}>
                Results will be displayed in NKJV translation
              </p>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}